<template>
  <div>
    <el-dialog v-model="dialogVisible" width="1010px" lock-scroll>
      <div class="dialog-main" @click="closeFn">
        <div class="title">百昌师爷Al：携手满血版DeepSeek-R1模型，重塑不良资产行业未来，加速AGI时代步伐</div>
        <div class="subtitle">
          百昌科技集团深耕金融科技领域，在不良资产处置方面有深厚学识与多年实战经验
          如今，我们将专业经验与AI领域的佼佼者DeepSeek R1结合，开启金融科技新篇章
        </div>
        <div class="content">
          <!-- <div class="content-item">
            <div class="content-title">
              <img class="title-img" src="../../../assets/chat/dialog1.png" alt="" />
              尽调报告
            </div>
            <div class="content-describe">
              借助满血版DeepSeek-R1模型的强大算力与深度学习能力，百昌师爷Al尽调报告实现了从数据收集到报告生成的全面智能化升级。一键操作，即可快速生成多维度、高度专业化的尽职调查报告。该报告广泛覆盖交易各方的主体资格、企业权证、企业资质、高新技术企业认定、失信惩罚措施或行政处罚等关键信息，为金融机构风控管理、不良资产高效处置、企业并购重组等复杂场景提供坚实的信息基石。
            </div>
            <div class="content-footer">
              <el-button @click="closeFn(1)" round
                >去使用<el-icon style="vertical-align: middle; margin-left: 5px"> <Right /> </el-icon
              ></el-button>
            </div>
            <img class="fire-img" src="../../../assets/chat/fire.png" alt="" />
          </div>
          <div class="content-item">
            <div class="content-title">
              <img class="title-img" src="../../../assets/chat/dialog2.png" alt="" />
              再查查客服
            </div>
            <div class="content-subtitle">法律问题，一触即答，智慧法律助手，让工作更简单！</div>
            <div class="content-list-container">
              <div class="item-container">
                <div class="left"><img class="left-img" src="../../../assets/chat/tool1.png" alt="" /></div>
                <div class="right">
                  <div class="right-title">即时响应，高效便捷</div>
                  <div class="right-content">智能问答系统能够即时响应用户的法律问题，随时随地获取即时的法律解答</div>
                </div>
              </div>
              <div class="item-container">
                <div class="left"><img class="left-img" src="../../../assets/chat/tool2.png" alt="" /></div>
                <div class="right">
                  <div class="right-title">精准理解，专业解答</div>
                  <div class="right-content">准确理解用户的问题意图，并提供专业、准确的法律解答</div>
                </div>
              </div>
            </div>

            <div class="content-footer">
              <el-button @click="closeFn(3)" round
                >去使用<el-icon style="vertical-align: middle; margin-left: 5px"> <Right /> </el-icon
              ></el-button>
            </div>
          </div>
          <div class="content-item">
            <div class="content-title">
              <img class="title-img" src="../../../assets/chat/dialog3.png" alt="" />
              不良处置专家
            </div>
            <div class="content-subtitle">法律问题，一触即答，智慧法律助手，让工作更简单！</div>
            <div class="main-content-container">
              <div class="main-img"></div>
            </div>
            <div class="content-footer">
              <el-button @click="closeFn(4)" round
                >去使用<el-icon style="vertical-align: middle; margin-left: 5px"> <Right /> </el-icon
              ></el-button>
            </div>
          </div> -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineEmits } from "vue"
const dialogVisible = ref(false)
const emits = defineEmits(["setTabActive"])
const closeFn = () => {
  dialogVisible.value = false
  // emits("setTabActive", id)
}
defineExpose({ dialogVisible })
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  padding: 0 !important;
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__footer {
    border-top: none;
    padding-top: 0;
  }
}

.dialog-main {
  padding: 0 23px;
  height: 555px;
  overflow: auto;
  box-sizing: border-box;
  border-radius: 15px;
  background: url("../../../assets/chat/dialog-bgc.png") no-repeat center center;
  background-size: contain;
  cursor: pointer;
  .title {
    color: #333;
    width: 650px;
    margin: 30px auto 0;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px;
  }
  .subtitle {
    color: #333;
    width: 595px;
    margin: 10px auto 20px;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
  }
  .content {
    height: 337px;
    width: 100%;
    display: flex;
    background-color: #fff;
    background: url("../../../assets/chat/first-img.png") no-repeat center center;
    background-size: cover;
    // .content-item {
    //   width: 100%;
    //   height: 337px;
    //   margin-right: 15px;
    //   // background-color: #fff;
    //   background: rgba(255, 255, 255, 0.5);
    //   border-radius: 15px;
    //   padding: 30px;
    //   box-sizing: border-box;
    //   border: 2px solid #fff;
    //   position: relative;
    //   .content-title {
    //     color: #333;
    //     font-family: "PingFang SC";
    //     font-size: 24px;
    //     font-style: normal;
    //     font-weight: 500;
    //     line-height: 22.068px;
    //     margin-bottom: 10px;

    //     .title-img {
    //       width: 36px;
    //       height: 36px;
    //       margin-right: 10px;
    //       vertical-align: middle;
    //     }
    //   }
    //   .content-footer {
    //     position: absolute;
    //     bottom: 30px;
    //     left: 30px;
    //     .el-button {
    //       width: 113px;
    //       height: 32px;
    //       background-color: transparent;
    //       color: #4458fe;
    //       text-align: center;
    //       font-family: "PingFang SC";
    //       font-size: 14px;
    //       font-style: normal;
    //       font-weight: 500;
    //       line-height: 22px;
    //       border-radius: 15px;
    //       border: 1px solid #4458fe;
    //     }
    //   }
    // }
    // .content-item:first-child {
    //   .content-describe {
    //     color: #333;
    //     text-align: justify;
    //     font-family: "PingFang SC";
    //     font-size: 12px;
    //     font-style: normal;
    //     font-weight: 400;
    //     line-height: 20px;
    //   }
    //   .fire-img {
    //     position: absolute;
    //     right: 0;
    //     bottom: 0;
    //     width: 159.468px;
    //     height: 159.468px;
    //     transform: rotate(-0.066deg);
    //   }
    // }
    // .content-item:nth-child(2) {
    //   .content-subtitle {
    //     color: #757575;
    //     font-family: "PingFang SC";
    //     font-size: 12px;
    //     font-style: normal;
    //     font-weight: 400;
    //     line-height: 14px;
    //   }
    //   .content-list-container {
    //     margin-top: 13px;
    //     .item-container {
    //       padding: 5px;
    //       width: 100%;
    //       height: 62px;
    //       margin-bottom: 9px;
    //       border-radius: 10px;
    //       background: rgba(255, 255, 255, 0.8);
    //       display: flex;
    //       align-items: center;
    //       .left {
    //         .left-img {
    //           width: 36.584px;
    //           height: 36.584px;
    //         }
    //         margin-right: 8px;
    //       }
    //       .right {
    //         .right-title {
    //           color: #333;
    //           font-family: "PingFang SC";
    //           font-size: 14px;
    //           font-style: normal;
    //           font-weight: 500;
    //           line-height: 18.39px;
    //         }
    //         .right-content {
    //           color: #333;
    //           font-family: "PingFang SC";
    //           font-size: 11px;
    //           font-style: normal;
    //           font-weight: 400;
    //           line-height: 15px;
    //           // padding: 5px 10px;
    //         }
    //       }
    //     }
    //   }
    // }
    // .content-item:last-child {
    //   margin-right: 0px;
    //   .main-content-container {
    //     text-align: center;

    //     .main-img {
    //       width: 240px;
    //       height: 150px;
    //       margin: 5px auto 0;
    //       background: url("../../../assets/chat/main-img.png") no-repeat center center;
    //       background-size: cover;
    //     }
    //   }
    // }
  }
}
</style>
